<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
    <!-- <link rel="icon" href=""> -->
    <title>客户群管理</title>

    <!-- <link rel="dns-prefetch" href="//cdn.jsdelivr.net"> -->
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="yes" name="apple-mobile-web-app-capable">

    <link rel="stylesheet" href="/homemobile/lib/css/weui.min.css">
    <link rel="stylesheet" href="/homemobile/lib/css/base.css">

    <style>
      .client-wrap {
        padding: .24rem;
      }
      .client-name {
        font-size: .32rem;
      }
      .client-item {
        padding: .24rem 0;
        border-bottom: 1px solid #eee;
      }
      .client-item .weui-check__label {
        padding: 0;
        border-radius: 3px;
      }
      .client-avatar {
        width: 1.2rem;
        height: 1.2rem;
        object-fit: cover;
        border-radius: .16rem;
        margin-right: .3rem;
      }
      .client-tags-box {
        height: .7rem;
        padding: .08rem 0;
        white-space: nowrap;
        overflow: hidden;
      }
      .client-tag {
        display: inline-block;
        font-size: .24rem;
        color: #555;
        padding: 2px 8px;
        margin-right: 2px;
        background: #f5f5f5;
        border-radius: 3px;
      }
      .dialog-main .form-line-label {
        width: 1.4rem;
      }

      /*列表部分*/
      .groupManage_info_container{

      }
      .groupManage_info_content{
        background: #f9f9f9;
        padding: .24rem .24rem .2rem .3rem;
        margin-top: .2rem;
      }
      .groupManage_infoHeader_container{
        display: flex;
        align-items: flex-start;
        padding-bottom: .24rem;
        border-bottom: 1px solid #f1f1f1;
      }
      .groupManage_infoHeader_container img{
        width: 0.775rem;
        height: 0.775rem;
        border-radius: 3px;
      }
      .groupManage_infoHeader_content{
        display: flex;
        flex:1;
        flex-direction: column;
        height: 0.775rem;
        justify-content: center;
        margin-left: .16rem;
      }
      .groupManage_infoHeader_groupName_content{
        display: flex;
        align-items: center;
      }
      .groupManage_infoHeader_groupName_content h2{
        color: #111;
        font-size: .28rem;
      }
      .groupManage_infoHeader_groupName_content span{
        color: #666;
        font-size: .28rem;
      }
      .groupManage_infoHeader_content p{
        color: #999;
        font-size: .28rem;
      }
      .groupManage_infoHeader_container svg{
        width: .32rem;
        height: .32rem;
        fill: #999;
        cursor: pointer;
      }
      .groupManage_infoFooter_container{
        padding-top: .24rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .groupManage_infoFooter_data_container{
        display: flex;
        align-items: center;
      }
      .groupManage_infoFooter_data_content{
        display: flex;
        align-items: center;
        margin-right: .4rem;
      }
      .groupManage_infoFooter_data_content span{
        color: #999;
        font-size: .28rem;
      }
      .groupManage_infoFooter_data_content b{
        color: #666;
        font-size: .28rem;
      }
      .groupManage_infoFooter_other_container span{
        padding: .1rem .2rem;
        background: #438ef7;
        border-radius: 3px;
        color: #fff;
        font-size: .28rem;
      }
      /*公共头部返回*/
      .PublicHeader_return_container{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: .20rem .20rem;
        background: #fff;
        border-bottom: 1px solid #ececec;
      }
      .PublicHeader_return_container a{
        display: flex;
        align-items: center;
      }
      .PublicHeader_return_container a img{
        width: .26rem;
        margin-right: .1rem;
      }
      .PublicHeader_return_container a span{
        font-size: .28rem;
        color: #333;
      }
      .PublicHeader_returnRight_container{

      }
    </style>
  </head>
  <body>
    <!-- 公共头部返回 -->
    <div class="PublicHeader_return_container">
      <a href="javascript:history.back(-1)">
        <img src="http://weidogstest.oss-cn-beijing.aliyuncs.com/f77d325980002e39aeaf451eaba37ba5.png">
        <span>客户群管理</span>
      </a>
      <div class="PublicHeader_returnRight_container">
        
      </div>
    </div>

    <div class="client-section">
      <div class="client-wrap">
        <div class="d-flex align-items-center justify-sb">
          <p class="vertical-line-title" style="margin-bottom: 0;">共{$count}个群聊</p>
        </div>
        <!-- 列表部分 -->
        <div class="groupManage_info_container">
	     	{loop $res as $re}
          <div class="groupManage_info_content">
            <div class="groupManage_infoHeader_container">
              <img src="{$users->avatar}" >
				<div class="groupManage_infoHeader_content">
               <div class="groupManage_infoHeader_groupName_content">
                 <h2>{$re->name?$re->name:'默认群名'}</h2>
                 <span>({count(json_decode($re->member_list,1))})</span> 
               </div>
               <p >群主：{$users->name}</p>
             </div>
              <!-- svg里 data-clipboard-text 这个是复制的内容 -->
              <svg class="copySvg" data-clipboard-text="{$re->name?$re->name:'默认群名'}" t="1603961626855" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3651" width="50" height="50"><path d="M192 981.333333C128 977.066667 81.066667 925.866667 85.333333 861.866667V332.8C81.066667 268.8 128 217.6 192 213.333333h473.6c59.733333 4.266667 106.666667 55.466667 102.4 119.466667v533.333333c4.266667 59.733333-42.666667 115.2-106.666667 119.466667h-469.333333zM170.666667 320v554.666667c0 12.8 8.533333 21.333333 21.333333 21.333333h469.333333c12.8 0 21.333333-8.533333 21.333334-21.333333v-554.666667c0-12.8-8.533333-21.333333-21.333334-21.333333h-469.333333c-12.8 0-21.333333 8.533333-21.333333 21.333333zM298.666667 810.666667c-25.6 0-42.666667-17.066667-42.666667-42.666667s17.066667-42.666667 42.666667-42.666667h256c25.6 0 42.666667 17.066667 42.666666 42.666667s-17.066667 42.666667-42.666666 42.666667H298.666667z m554.666666 0V170.666667c0-25.6-17.066667-42.666667-42.666666-42.666667H256c0-46.933333 38.4-85.333333 85.333333-85.333333h512c46.933333 0 85.333333 38.4 85.333334 85.333333v597.333333c0 46.933333-38.4 85.333333-85.333334 85.333334zM298.666667 640c-25.6 0-42.666667-17.066667-42.666667-42.666667s17.066667-42.666667 42.666667-42.666666h256c25.6 0 42.666667 17.066667 42.666666 42.666666s-17.066667 42.666667-42.666666 42.666667H298.666667z m0-170.666667c-25.6 0-42.666667-17.066667-42.666667-42.666666s17.066667-42.666667 42.666667-42.666667h256c25.6 0 42.666667 17.066667 42.666666 42.666667s-17.066667 42.666667-42.666666 42.666666H298.666667z" p-id="3652"></path></svg>
            </div>
            <!-- <div class="groupManage_infoFooter_container">
              <div class="groupManage_infoFooter_data_container">
                <div class="groupManage_infoFooter_data_content">
                  <span>今日入群：</span>
                  <b>0</b>
                </div>
                <div class="groupManage_infoFooter_data_content">
                  <span>今日退群：</span>
                  <b>0</b>
                </div>
              </div>
              <div class="groupManage_infoFooter_other_container">
                <span class="hitLable">打标签</span>
              </div>
            </div> -->
          </div>
		  {/loop}
        </div>
      </div>
    </div>
    
    <!-- 选标签面板 -->
    <!-- <div style="display: none;" id="tagsDialog" class="dialog-main">
      <p class="dialog-title">选择标签</p>
      <img onclick="closeDialog(this)" class="dialog-close" src="/homemobile/lib/img/close.png" alt="">
      <div class="dialog-tip">
        将给选择的<span class="dialog-tag-pnum">2</span>个客户批量打标签，请选择标签
      </div>
      <div style="min-height: 300px;">
        <p style="font-size: 12px;margin: 6px 0;">客户等级：</p>
        <div class="d-flex flex-wrap">
          <div class="dialog-tag disabled">一般</div>
          <div class="dialog-tag active">一般一般一般一般一般一般</div>
          <div class="dialog-tag">一般</div>
          <div class="dialog-tag">一般</div>
        </div>
        <p style="font-size: 12px;margin: 6px 0;">自定义：</p>
        <div class="d-flex flex-wrap">
          <div class="dialog-tag">一般</div>
          <div class="dialog-tag">一般</div>
          <div class="dialog-tag">一般</div>
          <div class="dialog-tag">一般</div>
        </div>
      </div>
      <div style="text-align: right;margin-top: 20px;">
        <a onclick="closeDialog(this)" href="javascript:" class="weui-btn weui-btn_mini weui-btn_default" style="font-size:13px;margin-right:.24rem;color:#666;">取消</a>
        <a href="javascript:" class="weui-btn weui-btn_mini weui-btn_primary tag-select-confirm" style="font-size:13px;">确定</a>
      </div>
    </div> -->
    <!-- 筛选面板 -->
    <div style="display: none;" id="filterDialog" class="dialog-main">
      <p class="dialog-title">筛选</p>
      <img onclick="closeDialog(this)" class="dialog-close" src="/homemobile/lib/img/close.png" alt="">
      
      <div class="d-flex align-items-center form-line">
        <div class="form-line-label">企业标签：</div>
        <div class="flex-1 form-multi-select">
          <span class="form-selected-placeholder">请选择标签</span>
        </div>
      </div>
      <div class="d-flex align-items-center form-line">
        <div class="form-line-label">添加时间：</div>
        <div class="flex-1 d-flex align-items-center">
          <input id="startTime" type="text" readonly class="flex-1 form-input form-input-date" placeholder="开始日期">
          <span style="padding: 0 5px;">~</span>
          <input id="endTime" type="text" readonly class="flex-1 form-input form-input-date" placeholder="结束日期">
        </div>
      </div>
      <div class="d-flex align-items-center form-line">
        <div class="form-line-label">添加渠道：</div>
        <select class="flex-1 weui-select form-select" name="select1">
          <option value="1">专属名片</option>
          <option value="2">其他渠道</option>
        </select>
      </div>
      <div class="d-flex align-items-center form-line">
        <div class="form-line-label">客户性别：</div>
        <select class="flex-1 weui-select form-select" name="select2">
          <option value="1">男</option>
          <option value="2">女</option>
          <option value="3">未知</option>
        </select>
      </div>
      <div class="d-flex align-items-center form-line">
        <div class="form-line-label">流失状态：</div>
        <select class="flex-1 weui-select form-select" name="select3">
          <option value="1">已流失</option>
          <option value="2">未流失</option>
        </select>
      </div>
      <div style="text-align: right;margin-top: 20px;">
        <a href="javascript:" class="weui-btn weui-btn_mini weui-btn_default filter-reset" style="font-size:13px;margin-right:.24rem;color:#666;">重置</a>
        <a href="javascript:" class="weui-btn weui-btn_mini weui-btn_primary filter-confirm" style="font-size:13px;">确定</a>
      </div>
    </div>
    

    <!-- <script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> -->
    <script src="/homemobile/lib/js/jquery.min.js"></script>
    <script src="/homemobile/lib/js/weui.min.js"></script>
    <script src="/homemobile/lib/js/common.js"></script>
    <script src="/layui/layui.js"></script>
    <script src="/js/ajax.js"></script>
    <!-- 复制粘贴 -->
    <script src="/cdn/clipboard.js"></script>
    <script>
      var clipboard = new ClipboardJS('.copySvg');

      clipboard.on('success', function(e) {
          tusi('复制成功');
          console.info(e.text);
      });

      clipboard.on('error', function(e) {
          console.error('Action:', e.action);
          console.error('Trigger:', e.trigger);
      });
    </script>
    <script>
      var tagsTrigger;

      $(document).on('click', '.client-checkall', function() {
        var _this = $(this)
        _this.parentsUntil('.client-section')
          .find('.client-item-check')
          .prop('checked', _this.is(':checked'))
      })
      // 批量打标签
      $('.batch-tag').on('click', function() {
        var checkedNodes = $('.client-item-check:checked')
        if (!checkedNodes.length) {
          weui.topTips('请先选择一个客户', 1500);
          // weui.toast('请先选择一个客户', 2000);
        } else {
          $('#tagsDialog .dialog-tip').show()
          $('.dialog-tag-pnum').text(checkedNodes.length)
          tagsTrigger = null
          showDialog('#tagsDialog')
        }
      })

      // 打标签
      $('.hitLable').on('click', function() {
        $('#tagsDialog .dialog-tip').show()
        tagsTrigger = null
        showDialog('#tagsDialog')
      })

      // 选择标签
      $(document).on('click', '.form-multi-select', function(e) {
        $('#tagsDialog .dialog-tip').hide()
        tagsTrigger = '.form-multi-select'
        showDialog('#tagsDialog')
      })
      $(document).on('click', '.dialog-tag', function(e) {
        var _this = $(this)
        if (!_this.hasClass('disabled')) {
          _this.toggleClass('active')
        }
      })
      $(document).on('click', '.tag-select-confirm', function(e) {
        var _this = $(this)
        var pNode = _this.parentsUntil('.m-dialog')
        var selected = pNode.find('.dialog-tag.active')
        if (tagsTrigger) {
          var selectedValue = ''
          for (var i = 0; i < selected.length; i++) {
            selectedValue += '<div class="form-selected-block"><span>' + selected[i].innerText +'</span><span class="form-selected-clear"></span></div>'
          }
          $(tagsTrigger).html(selectedValue || '<span class="form-selected-placeholder">请选择标签</span>')
        }
        closeDialog()
      })
      $(document).on('click', '.form-selected-clear', function(e) {
        e.stopPropagation()
        $(this).parent().remove()
      })

      // 日期选择
      $(document).on('click', '.form-input-date', function(e) {
        var _this = $(this)
        var date = _this.val()
        var options = {
          // start: new Date(), // 从今天开始
          start: 1990,
          end: 2030,
          // defaultValue: ['2022', '07', '07'],
          onConfirm: function(result){
            _this.val(formatDateResult(result))
          },
          id: _this[0].id
        }
        if (date) options.defaultValue = date.split('-');
        weui.datePicker(options)
      })
      // 格式化日期选择器的结果为: 2020-10-10
      function formatDateResult(result) {
        var str = ''
        for(var i = 0; i < result.length; i++) {
          str += i === 0 ? '' : '-'
          str += result[i] > 9 ? result[i] : ('0' + result[i])
        }
        return str
      }

      // 筛选
      $('.filter-btn').on('click', function() {
        showDialog('#filterDialog')
      })
      function clos(){
        window.location.href="javascript:history.go(-1)";
      }
    </script>
  </body>
</html>
